<template>
  <div class="channel-onboarding-container">
    <div class="page-header">
      <h2>渠道进件管理</h2>
      <p>管理商户向各支付渠道的进件申请和审核进度</p>
    </div>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-input
            v-model:value="searchForm.merchantName"
            placeholder="商户名称"
            allow-clear
          />
        </a-col>
        <a-col :span="6">
          <a-select
            v-model:value="searchForm.channelCode"
            placeholder="支付渠道"
            allow-clear
            style="width: 100%"
          >
            <a-select-option
              v-for="channel in channelOptions"
              :key="channel.value"
              :value="channel.value"
            >
              {{ channel.label }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-select
            v-model:value="searchForm.status"
            placeholder="申请状态"
            allow-clear
            style="width: 100%"
          >
            <a-select-option
              v-for="status in statusOptions"
              :key="status.value"
              :value="status.value"
            >
              {{ status.label }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-space>
            <a-button type="primary" @click="handleSearch">
              <template #icon><search-outlined /></template>
              搜索
            </a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
        </a-col>
      </a-row>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <a-table
        :columns="columns"
        :data-source="filteredData"
        :loading="loading"
        :pagination="pagination"
        row-key="id"
        :scroll="{ x: 1400 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'channelName'">
            <a-tag
              :color="channelOptions.find(c => c.value === record.channelCode)?.color"
            >
              {{ record.channelName }}
            </a-tag>
          </template>

          <template v-else-if="column.key === 'status'">
            <a-tag
              :color="statusOptions.find(s => s.value === record.status)?.color"
            >
              {{ statusOptions.find(s => s.value === record.status)?.label }}
            </a-tag>
          </template>

          <template v-else-if="column.key === 'progress'">
            <div class="progress-container">
              <a-steps
                :current="getProgressStep(record.progress)"
                size="small"
                :items="progressSteps"
              />
            </div>
          </template>

          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button
                type="link"
                size="small"
                @click="handleView(record)"
              >
                查看
              </a-button>
              <a-button
                v-if="record.status === 'pending'"
                type="link"
                size="small"
                @click="handleSubmit(record)"
              >
                提交申请
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 详情弹窗 -->
    <a-modal
      v-model:open="detailVisible"
      title="渠道进件详情"
      :footer="null"
      width="800px"
    >
      <div v-if="selectedRecord" class="detail-content">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="申请编号">
            {{ selectedRecord.id }}
          </a-descriptions-item>
          <a-descriptions-item label="商户名称">
            {{ selectedRecord.merchantName }}
          </a-descriptions-item>
                     <a-descriptions-item label="支付渠道">
             <a-tag
               :color="channelOptions.find(c => c.value === selectedRecord?.channelCode)?.color"
             >
               {{ selectedRecord?.channelName }}
             </a-tag>
           </a-descriptions-item>
          <a-descriptions-item label="申请状态">
            <a-tag
              :color="statusOptions.find(s => s.value === selectedRecord?.status)?.color"
            >
              {{ statusOptions.find(s => s.value === selectedRecord?.status)?.label }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="申请时间">
            {{ selectedRecord.applicationDate }}
          </a-descriptions-item>
          <a-descriptions-item label="提交时间">
            {{ selectedRecord.submitDate || '未提交' }}
          </a-descriptions-item>
          <a-descriptions-item label="响应时间">
            {{ selectedRecord.responseDate || '未响应' }}
          </a-descriptions-item>
          <a-descriptions-item label="渠道商户号">
            {{ selectedRecord.channelMerchantId || '未分配' }}
          </a-descriptions-item>
        </a-descriptions>

        <div class="progress-section">
          <h4>进件进度</h4>
          <a-steps
            :current="getProgressStep(selectedRecord.progress)"
            direction="vertical"
            :items="progressStepsDetail"
          />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { message } from 'ant-design-vue'
import { SearchOutlined } from '@ant-design/icons-vue'
import {
  channelOnboardingData,
  channelOptions,
  statusOptions,
  type ChannelOnboardingApplication
} from './data'

const loading = ref(false)
const detailVisible = ref(false)
const selectedRecord = ref<ChannelOnboardingApplication | null>(null)

const searchForm = reactive({
  merchantName: '',
  channelCode: undefined,
  status: undefined
})

const columns = [
  {
    title: '申请编号',
    dataIndex: 'id',
    key: 'id',
    width: 150,
    fixed: 'left'
  },
  {
    title: '商户名称',
    dataIndex: 'merchantName',
    key: 'merchantName',
    width: 180
  },
  {
    title: '支付渠道',
    dataIndex: 'channelName',
    key: 'channelName',
    width: 120
  },
  {
    title: '申请时间',
    dataIndex: 'applicationDate',
    key: 'applicationDate',
    width: 150
  },
  {
    title: '申请状态',
    dataIndex: 'status',
    key: 'status',
    width: 100
  },
  {
    title: '进件进度',
    dataIndex: 'progress',
    key: 'progress',
    width: 300
  },
  {
    title: '操作',
    key: 'action',
    width: 120,
    fixed: 'right'
  }
]

const progressSteps = [
  { title: '资料提交' },
  { title: '材料审核' },
  { title: '渠道审核' },
  { title: '签约完成' }
]

const progressStepsDetail = [
  { title: '资料提交', description: '向渠道提交商户资料' },
  { title: '材料审核', description: '渠道审核提交的材料' },
  { title: '渠道审核', description: '渠道进行最终审核' },
  { title: '签约完成', description: '完成协议签约，获得商户号' }
]

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条记录`
})

const filteredData = computed(() => {
  let data = [...channelOnboardingData]

  if (searchForm.merchantName) {
    data = data.filter(item =>
      item.merchantName.toLowerCase().includes(searchForm.merchantName.toLowerCase())
    )
  }

  if (searchForm.channelCode) {
    data = data.filter(item => item.channelCode === searchForm.channelCode)
  }

  if (searchForm.status) {
    data = data.filter(item => item.status === searchForm.status)
  }

  pagination.total = data.length
  return data
})

const getProgressStep = (progress: any) => {
  if (progress.contractSign) return 3
  if (progress.channelReview) return 2
  if (progress.materialReview) return 1
  if (progress.dataSubmit) return 0
  return -1
}

const handleSearch = () => {
  pagination.current = 1
}

const handleReset = () => {
  Object.assign(searchForm, {
    merchantName: '',
    channelCode: undefined,
    status: undefined
  })
  pagination.current = 1
}

const handleView = (record: ChannelOnboardingApplication) => {
  selectedRecord.value = record
  detailVisible.value = true
}

const handleSubmit = (record: ChannelOnboardingApplication) => {
  message.success(`已提交 ${record.merchantName} 的 ${record.channelName} 进件申请`)
}
</script>

<style scoped>
.channel-onboarding-container {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
}

.search-bar {
  margin-bottom: 24px;
  padding: 20px;
  background: #fafafa;
  border-radius: 6px;
}

.progress-container {
  width: 280px;
}

.progress-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.progress-section h4 {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
}
</style>